<template>
    <div style="background-color: #ececec; padding: 20px">
      <a-row :gutter="15">
        <a-col>
          <a-card title="水蒸气统计" :bordered="false">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="起始时间:">
                <el-date-picker v-model="formInline.startTime" :type="formInline.datePickerType" placeholder="选择起始时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间:">
                <el-date-picker v-model="formInline.endTime" :type="formInline.datePickerType" placeholder="选择结束时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="部门:">
                <el-select v-model="formInline.dept" placeholder="选择部门">
                  <el-option v-for="item in this.dept"
                          :key="item.value"
                          :label="item.label"
                          :value="item.departName">{{ item.departName }}
                        </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日期类型:">
                <el-select v-model="formInline.datePickerType" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </a-card>
        </a-col>
      </a-row>
      
      <a-row :gutter="16" :style="{ marginTop: '16px' }">
        <a-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>本月累计水蒸气(m³)</span>
            </div>
            <div class="text item" style="font-size: 44px;">{{thisMonth}}</div>
          </el-card>
        </a-col>
        <a-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>今年水蒸气峰值(m³)</span>
            </div>
            <div class="text item" style="font-size: 44px;">{{yearMax}}</div>
          </el-card>
        </a-col>
        <a-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>今年水蒸气最小值(m³)</span>
            </div>
            <div class="text item" style="font-size: 44px;">{{yearMin}}</div>
          </el-card>
        </a-col>
        <a-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>今年平均水蒸气(m³)</span>
            </div>
            <div class="text item" style="font-size: 44px;">{{yearAvg}}</div>
          </el-card>
        </a-col>
      </a-row>
      <br>

      <template>
        <a-card style="width: 100%">
          <div style="width:100%; height:330px;">
            <div id="main" ref="e4" class="five"></div>
          </div>
        </a-card>
      </template>

    </div>
  </template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts';

  export default {
    data () {
      return {
        options: [{value: 'month', label: '月'}, {value: 'date', label: '天'}],
        chart: null,
        formInline: {
          datePickerType: 'month',
          startTime: '',
          endTime: '',
          dept: ''
        },
        dept:[],
        data1:[],
        data2:[],
        thisMonth: '',
        yearMax: '',
        yearMin: '',
        yearAvg: '',
        url: {
          getDept: '/sys/sysDepart/list',
          getStatistics:'/consumptionSteam/consumptionSteam/select'
        },
      }
    },
    methods: {
      selectStatistics(){
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth()+1;
        let thisMonth = 0;
        let yearMax = 0;
        let yearMin = 0;
        let yearAvg = 0;
        console.log(this.formInline);
        postAction(this.url.getStatistics,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(e=>{
            let con = parseInt(e.consumption);
            if (year == e.year){
              yearAvg += con;
            }
            if (yearMax == 0){
              yearMax = con;
            } else if (yearMax < con){
              yearMax = con;
            }
            if (yearMin == 0){
              yearMin = con;
            } else if (yearMin > con){
              yearMin = con;
            }
            if(month == e.month && year == e.year){
              thisMonth += con;
            }
          })
          this.thisMonth = thisMonth;
          this.yearAvg = Math.trunc(yearAvg/month);
          this.yearMax = yearMax;
          this.yearMin = yearMin;
        })
      },
      loadSteam(){
        var endDate = new Date();
        var startDate = (endDate.getFullYear()-1)+"/"+(endDate.getMonth()+1);
        let data1 = [];
        let data2 = [];
        this.formInline.startTime = new Date(Date.parse(startDate));
        console.log(startDate);
        this.formInline.endTime = endDate;
        console.log(endDate);
        console.log(this.formInline);
        postAction(this.url.getStatistics,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(item=>{
            if('date' == this.formInline.datePickerType){
              data1.push(item.year+'-'+item.month+'-'+item.day);
            }else{
              data1.push(item.year+'-'+item.month);
            }
            data2.push(item.consumption);
          })
          this.data1 = data1;
          this.data2 = data2;
        })
      },
      onSubmit() {
        let data1 = [];
        let data2 = [];
        if('month' == this.formInline.datePickerType){
          let endTime = new Date(this.formInline.endTime);
          let year = endTime.getFullYear();
          let month = endTime.getMonth()+1;
          let lastDate = new Date(year, month , 0).getDate();
          month = month < 10 ? '0' + month : month ;
          endTime = [year,month ,lastDate ].join("-")+" 23:59:59";
          this.formInline.endTime = new Date(endTime);
        }
        postAction(this.url.getStatistics,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(item=>{
            if('date' == this.formInline.datePickerType){
              data1.push(item.year+'-'+item.month+'-'+item.day);
            }else{
              data1.push(item.year+'-'+item.month);
            }
            data2.push(item.consumption);
          })
          this.data1 = data1;
          this.data2 = data2;
        })
        this.selectStatistics();
        setTimeout(() => {
          this.getzhu()
        }, 500)
      },
      handleChange1(){
        this.dept = []
        getAction(this.url.getDept).then((res)=>{
          this.dept = res.result;
          console.log(this.dept);
        })
      },
      getzhu(){
        if(this.chart != null && this.chart != '' && this.chart != undefined){
          this.chart.dispose();
        }
        var chartDom = document.getElementById('main');
        this.chart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '总流量(m³)'
          },
          tooltip: {
            trigger: 'axis', // 触发类型，在饼形图中为item
          },
          legend: {
            data: ['总流量'],
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            },
            padding: [0,15,0,0]
          },
          xAxis: {
            type: 'category',
            data: this.data1,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '总流量',
              data: this.data2,
              type: 'line',
              smooth: true,
            }
          ],
        };
        option && this.chart.setOption(option,true);
      },
    },
    created () {
      this.handleChange1();
      setTimeout(() => {
        this.formInline.dept = this.dept[this.dept.length-1].departName;
        this.loadSteam();
        this.selectStatistics();
      }, 500)
      setTimeout(() => {
        
      }, 700)
    },
    mounted(){
      //this.datasource = data
      setTimeout(() => {
        this.getzhu()
      }, 900)
    },
  }
</script>

<style>
 .sousuo{
  font-size: 14px;
  display: inline;
  /* font-weight:bold; */
 }
 .five {
  width: 100%;
  height: 100%;
}
.el-card__body{
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
  }
</style>
  
  
  